<template>
<div>
  <div class="about" v-loading="this.$store.state.loading">dd</div>
  <button @click="fn1">点击切换</button>
  <button @click="fn2">btn 请求1</button>
</div>
  
</template>



<script>
import {getUsername}   from "@/api/user.js"
export default {
  //组件名字
  name: "moban",
  //接收父组件给的东西 type是接收什么东西  default 默认值
  props: {
    list: {
      type: Array,
      default() {
        return [];
      },
    },
    color: {
      type: String,
      default: "#000",
    },
  },
  //组件注册
  components: {},
  // vue数据集中管理
  data() {
    return {
      value: "1",
      loading: true,
    };
  },
  //方法 函数写这里
  methods: {
    fn1(){
      // this.loading = !this.loading
      var flag = this.$store.state.loading
      this.$store.commit('changeloading',!flag)
    },
    fn2(){
    //    axios.request({
    //     url:'/axiosget1',
    //     method:'get'
    // })
      getUsername({}).then((res)=>{
         console.log('res',res)
      }).catch((error)=>{

        // return Promise.reject(err)
         console.log('进入请求error',error)
         this.$message({
           message:error.message,
           type:error
         })
         
      })
    }
  },
  //计算属性
  computed: {},
  //侦听器
  watch: {},
  //过滤器
  filters: {
    toUpcase(value) {
      return value ? value.toUpperCase() : "";
    },
  },
  //以下是生命周期
  //组件创建之前
  beforeCreate() {},
  //组件创建之后
  created() {},
  //页面渲染之前
  beforeMount() {},
  //页面渲染之后
  mounted() {},
  //页面销毁之前
  beforeDestroy() {},
  //页面销毁之后
  destroyed() {},
  //页面视图数据更新之前
  beforeUpdate() {},
  //页面视图数据更新之后
  updated() {},
  //组件路由守卫enter
  beforeRouteEnter(to, from, next) {
    next((vm) => {});
    // 注意，在路由进入之前，组件实例还未渲染，所以无法获取this实例，只能通过vm来访问组件实例
  },
  //组件路由守卫update更新
  beforeRouteUpdate(to, from, next) {
    // 同一页面，刷新不同数据时调用，
    next();
  },
  //组件路由守卫离开
  beforeRouteLeave(to, from, next) {
    // 离开当前路由页面时调用
    next();
  },
};
</script>





<style lang="scss" scoped>
.about {
  width: 500px;
  height:500px;
  background-color: blanchedalmond;
}
</style> 